import React from 'react';
import { Form, Row, Col, Input, Button ,Select ,InputNumber ,Checkbox ,Radio ,DatePicker} from 'dw-mx';
import { Code, NumberMask} from 'dw-mx-extend';

export default function ControlCursorDemo() {

    const [form] = Form.useForm();

    const onClick = async () => {

        try {
            const values = await form.validateFields();
            console.log('Success:', values);

        } catch (errorInfo) {
            // 验证失败
            console.log('Failed:', errorInfo);

            const eleid = errorInfo.errorFields[0].name[0]

            // 当校验项为 Checkbox.Group 、 Radio.Group 时，将焦点定位在选项上
            if(eleid == 'proapp' || eleid == 'proapp2'){
                document.getElementById(eleid).getElementsByClassName('ant-checkbox-input')[0].focus()
            }else if(eleid == 'proown' || eleid == 'subordinate'){
                document.getElementById(eleid).getElementsByClassName('ant-radio-input')[0].focus()
            }else{
                document.getElementById(eleid).focus()
            }

        }

    };

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };

    return (
        <>
            <Form form={form}
                  {...layout}
                  layout={'horizontal'}
            >
                <Row>
                    <Col  span={8} >
                        <Form.Item label="模板编号" name="templatenum" rules={[{ required: true }]}>
                            <Input placeholder={"模板编号"} maxLength={10} />
                        </Form.Item>
                    </Col>
                    <Col span={8} >
                        <Form.Item label="模板内容" name="contentname" rules={[{ required: true }]}>
                            <Input.TextArea placeholder={"模板内容"} maxLength={10}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} >
                        <Form.Item label="####" name="n1" rules={[{ required: true }]}>
                            <InputNumber placeholder={'####'} {...NumberMask("###")} />
                        </Form.Item>
                    </Col>
                    <Col span={8} >
                        <Form.Item label="####.00" name="n2" rules={[{ required: true }]}>
                            <InputNumber placeholder={'####.00'} {...NumberMask("####.00")}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} >
                        <Form.Item label="####.00" name="n3" rules={[{ required: true }]}>
                            <InputNumber placeholder={'####.00'} {...NumberMask("####.00")} />
                        </Form.Item>
                    </Col>

                    <Col span={12} >
                        <Form.Item label="性别" name="xb" rules={[{ required: true }]}>
                            <Select options={Code.STRINGCODE('1:男,2:女')} allowClear={true} placeholder={"请选择..."}/>
                        </Form.Item>
                    </Col>

                    <Col span={12} >
                        <Form.Item label="产品应用地" name="proapp" rules={[{ required: true }]}>
                            <Checkbox.Group options={Code.STRINGCODE('1:北京,2:上海,3:广州')}/>
                        </Form.Item>
                    </Col>
                    <Col span={12} >
                        <Form.Item label="产品应用地" name="proapp2" rules={[{ required: true }]}>
                            <Checkbox.Group options={Code.STRINGCODE('1:山东,2:上海,3:广州')}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} >
                        <Form.Item label="产品归属地" name="proown" rules={[{ required: true }]}>
                            <Radio.Group options={Code.STRINGCODE('1:济南,2:北京,3:南京,4:合肥')} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="隶属应用" name="subordinate" rules={[{ required: true }]}>
                            <Radio.Group options={Code.STRINGCODE('1:ACCMS,2:BMRS,3:SEF,4:BPZone')} />
                        </Form.Item>
                    </Col>
                    <Col span={12} >
                        <Form.Item label="年" name="y1" rules={[{ required: true }]}>
                            <DatePicker picker={'year'} format={'YYYY'} />
                        </Form.Item>
                    </Col>
                    <Col span={12} >
                        <Form.Item label="任务状态" name="rwzt" rules={[{ required: true }]}>
                            <Select options={Code.STRINGCODE('1:已完成,2:未完成,3:已作废')} placeholder={"请选择..."}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} >
                        <Form.Item label="年月日" name="y3" rules={[{ required: true }]}>
                            <DatePicker picker={'week'} format={'YYYY-MM-DD'} />
                        </Form.Item>
                    </Col>
                </Row>

            </Form>

            <Button onClick={onClick}>取值</Button>
        </>
    );
}